<template>
  <div v-if="typeList.length > 0" class="filter">
    <el-card shadow="hover">
      <div class="box">
        <el-form ref="filterForm" :model="filterForm" label-width="80px">
          <el-form-item label="作品分类">
            <el-radio-group v-model="type" @change="handleSearch">
              <el-radio label="0" border>全部</el-radio>
              <el-radio
                :label="item.id"
                border
                v-for="item in typeList"
                :key="item.id"
              >{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="更新时间">
            <el-radio-group v-model="updateDay" @change="handleSearch">
              <el-radio label="0" border>全部</el-radio>
              <el-radio label="3" border>三日内</el-radio>
              <el-radio label="7" border>一周内</el-radio>
              <el-radio label="15" border>半月内</el-radio>
              <el-radio label="30" border>一月内</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="更新进度">
            <el-radio-group v-model="isOver" @change="handleSearch">
              <el-radio label="0" border>全部</el-radio>
              <el-radio label="1" border>连载中</el-radio>
              <el-radio label="2" border>已完本</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
  <el-card class="fail" v-else>
    <div class="fail-box">
      <svg-icon icon-class="logo" class-name="logo-bottom"/>
      <span style="padding-bottom:20px;">组件加载失败</span>
      <el-button size="small" type="primary" plain round>刷新</el-button>
    </div>
  </el-card>
</template>

<script>
import { getBookType } from "@/api/common";
import { getSearchList } from "@/api/list";
export default {
  name: "filtercard",
  props: { currentPage: Number },
  data() {
    return {
      filterForm: {},
      type: "0",
      updateDay: "0",
      isOver: "0",
      typeList: []
    };
  },
  created() {
    if (this.$route.query.type) {
      this.type = this.$route.query.type;
    }
    if (this.$route.query.isOver) {
      this.isOver = this.$route.query.isOver.toString();
    }
    if (this.$route.query.updateDay) {
      this.updateDay = this.$route.query.updateDay.toString();
    }

    this.getBookType();
    this.handleSearch();
  },
  watch: {
    currentPage() {
      this.handleSearch();
    }
  },
  methods: {
    // 获取分类
    getBookType() {
      getBookType().then(res => {
        this.typeList = res.data.bookType;
      });
    },
    handleSearch() {
      let data = {
        updateDay: this.updateDay,
        type: this.type,
        isOver: this.isOver,
        page: this.currentPage
      };

      for (let item in data) {
        if (data[item] === "0") {
          delete data[item];
        }
      }

      getSearchList(data).then(res => {
        this.$emit("getSearchList", res.data);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.filter {
  padding: 56px 0 32px 0;
  .box {
    padding: 28px 32px;
    background: #ffffff;
  }
}

.filter:hover {
  transform: translateY(-3px);
  transition: all 0.3s linear;
}

.fail {
  margin-top: 20px;
  width: 1200px;
  margin: 0 auto;
  .fail-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .logo-bottom {
      font-size: 110px;
      margin-top: 20px;
      margin-bottom: 28px;
    }
  }
}
</style>